<template>
	<view class="cu-group" :class="checked ? ' checked' : ''" @click="onClick()">
		<slot></slot>
		<text v-if="checked" @click.stop="handleDel" class="cuIcon-delete"></text>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			checked: false
		};
	},
	name: 'cu-group',
	props: {
		index: {
			type: [String, Number],
			default: 0
		}
	},
	methods: {
		...mapMutations(['delPageElement']),
		onClick(e) {
			this.checked = !this.checked;
			//this.$emit('onchange', index);
		},
		handleDel(e) {
			this.delPageElement(this.index)
		}
	}
};
</script>

<style scoped>
.cu-group {
	position: relative;
	width: 100%;
}
.cu-group.checked {
	border: #0081ff 1upx solid;
	padding: 1upx;
}
.cuIcon-delete {
	position: absolute;
	right: 2upx;
	top: 2upx;
	z-index: 9999;
	color: #FF3333;
	
}
</style>
